<template>
  <!-- 房屋管理 -->
  <div class="house">
    <!-- 输入框部分 -->
    <div class="house-input">
      <el-input v-model="input" placeholder="小区名称" size="medium"></el-input>
      <el-input
        v-model="input1"
        placeholder="单元名称"
        size="medium"
      ></el-input>
      <!-- 时间 -->
      <div class="block">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          size="medium"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <!-- 状态 -->
      <div class="block">
        <el-select v-model="value" placeholder="选择状态" size="medium">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <!-- 按钮 -->
      <el-button type="primary" icon="el-icon-search" @click="unit"></el-button>
      <el-button
        type="success"
        icon="el-icon-plus"
        style="width: 120px; font-size: 15px"
        @click="add"
        >录入</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        style="width: 118px; font-size: 15px"
        @click="chongzhi"
        >重置</el-button
      >
    </div>
    <!-- 表单 -->
    <div class="form">
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column prop="communityname" label="小区名称" width="300">
          </el-table-column>
          <el-table-column prop="unitname" label="单元名称" width="300">
          </el-table-column>
          <el-table-column prop="unitnum" label="栋数" width="180">
          </el-table-column>
          <el-table-column
            v-model="createtime"
            prop="createtime"
            label="建设时间"
            width="300"
          ></el-table-column>
          <el-table-column
            prop="unitstatus"
            label="状态"
            width="180"
          ></el-table-column>
          <el-table-column prop="type" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="handleDelete(scope.$index, scope.row)"
                >归档</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block unitnum">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      loading: true,
      // 输入框
      input: "",
      input1: "",
      // 日历
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      aa: [],
      value1: "",
      value2: "",
      // 状态
      options: [
        {
          value: "1",
          label: "已建成",
        },
        {
          value: "2",
          label: "未建成",
        },
      ],
      value: "",
      // 表单
      tableData: [],
      createtime: "",
      // communityname: this.input, // 小区名
      // unitname: this.input1, // 单元名
      // unitnum: "", // 栋数
      // createtime: this.value2, // 建设时间
      // unitstatus: this.value, // 状态
      // 分页
      currentPage4: 1,
      total: 0, // 总页数
      pageSize: 10, // 每页显示条数
      num: 0, // 条数
      // token
      token: localStorage.getItem("token"),
    };
  },
  created() {
    this.district();
  },
  methods: {
    // 获取小区信息(表格)
    district() {
      this.$axios
        .get(
          "/house/gethouseList?pageNum=" +
            this.pageSize +
            "&currPage=" +
            this.num
        )
        .then((res) => {
          if (res.status == 200) {
            setTimeout(() => {
              this.loading = false;
            }, 500);
            console.log(res);
            this.tableData = res.data.data;
            this.total = res.data.total;

            // this.tableData = aa;
            for (let a = 0; a < this.tableData.length; a++) {
              const aa = moment(this.tableData[a].createtime).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              console.log(aa, 1111);
              this.tableData[a].createtime = aa;
              this.aa.push(aa);

              if (this.tableData[a].unitstatus == 1) {
                this.tableData[a].unitstatus = "已建成";
              } else if (this.tableData[a].unitstatus != 1) {
                this.tableData[a].unitstatus = "未建成";
              }
            }
            console.log(localStorage.get);
            console.log(this.aa);
          }
        });
    },
    // 归档
    handleDelete(a, row) {
      this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .get("house/delunitList?id=" + row.id + "&token=" + this.token)
          .then((res) => {
            console.log(res);
            this.district();
          });
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.district();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.num = val - 1;
      this.district();
    },
    // 搜索
    unit() {
      console.log(this.value2);
      this.$axios({
        url: "/house/searchList",
        method: "GET",
        params: {
          communityname: this.input, // this.input
          unitname: this.input1, // this.input1
          createDt: this.value2, //
          value: this.value, // this.value
          currPage: this.num + 1, // this.num
          pageNum: this.pageSize, // this.pageSize
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    // 重置
    chongzhi() {
      this.input = "";
      this.input1 = "";
      this.value = "";
      this.value2 = "";
    },
    // 添加
    add() {
      // 跳转页面
      this.$router.push({
        path: "/house/add",
      });
    },
    // 详情
    handleEdit(index, row) {
      this.$router.push({
        path: "/house/edit",
        query: {
          id: row.id,
        },
      });
      console.log(index, row);
    },
  },
};
</script>

<style lang="scss" scoped>
// 搜索
.house::v-deep {
  .el-input--medium .el-input__inner {
    height: 38px;
  }
}
.house-input {
  display: flex;
  margin-bottom: 20px;
}
.el-input {
  width: 266px;
  margin-right: 10px;
}
.el-select {
  width: 266px;
  margin-right: 80px;
}
// 分页
.unitnum {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
body {
  margin: 0;
}
</style>
